<!--
 * @Author: liangzhuo liangzhuo@chzu.com
 * @Date: 2022-10-21 20:39:29
 * @LastEditors: liangzhuo liangzhuo@chzu.com
 * @LastEditTime: 2022-10-30 15:20:27
 * @FilePath: \hongxinUi\src\views\exam\judge\index.vue
 * @Description: 判断题
-->
<template>
  <div style="width: 100%; height: 100%;">
    <common 
      :examType="examType" 
      :queryParams="queryParams"  
      :multipleSelection="multipleSelection"
      @isOpenDialog="getChildIsOpenDialog"
      @examInfo="getChildExamInfo"
    />
    <!--试题表格开始-->
    <el-table :data="examInfoList" border style="width: 100%;"
     v-loading="loading" @selection-change="handleSelectionChange"
     ref="multipleTable">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="questionText" label="问题" width="800" />
      <el-table-column  label="答案" width="100">
        <template slot-scope="scope">
          {{scope.row.answer == 0 ? '正确' : '错误'}}
        </template>
      </el-table-column>
      <el-table-column label="图片" width="150">
        <template slot-scope="scope">
          <img
            v-if="scope.row.fileName"
            :src="baseUrl + scope.row.bucketName + '/' + scope.row.fileName"
            style="width: 100px"/>
          <span v-if="!scope.row.fileName"  style="color:chocolate">暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作" width="130" v-if="isShow">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isOpenDialog"
      width="80%"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="问题" prop="questionText" :label-width="formLabelWidth" >
          <el-input v-model="form.questionText" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="答案" prop="answer" :label-width="formLabelWidth" >
          <!-- <el-input v-model="form.answer" autocomplete="off"></el-input> -->
          <el-select v-model="form.answer" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--图片上传-->
        <examFileUpload :form="form" @getChildrenForm="getChildrenForm"/>
      </el-form>
      <!-- 确定与取消 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      </span>
    </el-dialog>

    <pagination
      style="margin-bottom: 30px;"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {getExamJudge, addExamJudge, delExamJudge, updateExamJudge} from '@/api/exam/examJudge.js'
import common from '@/components/exam/common'
import examFileUpload from '@/components/exam/examFileUpload'
import global from "@/global/global.js";
export default {
  name: 'HongxinUiIndex',
  components: {common, examFileUpload},
  watch: {
    '$store.getters.noAllSelection': {
      handler(val){
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  data() {
    return {
      examType: 'judge', // 试题类型---不可修改
      examInfoList: [], // 总数据
      total: 0,  // 总条数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        questionText: undefined
      },
      multipleSelection: [], // 勾选框数组
      isOpenDialog: false, // 弹出框
      dialogTitle: '', // 弹出框标题
      formLabelWidth: "80px", // 对话框的左边距
      form: {},
      // 封装图片的ip
      baseUrl: global.baseUrl,
      rules: {
        questionText: [
          { required: true, message: "请输入试题问题", trigger: "blur" },
        ],
        answer: [
          { required: true, message: "请输入试题答案", trigger: "blur" },
        ],
      },
      options: [
        {
          value: '0',
          label: '正确'
        }, {
          value: '1',
          label: '错误'
        }
      ],
      loading: true,
      isShow: true,
    };
  },

  created() {
    this.getAllExamInfo()
  },
  mounted() {
    // 得到全局的变量
    this.isShow = this.$store.getters.isShow
  },
  methods: {
    // 获取全部的数据信息
    getAllExamInfo() {
      getExamJudge(this.queryParams).then(res => {
          this.examInfoList = res.rows
          this.total = res.total
          this.loading = false
        })
    },
    // 接收父组件传来的数据
    getChildExamInfo(val) {
      this.examInfoList = val.dataList
      this.total = val.total
    },
    // 接收父组件传来的数据 -- 是否打开弹出框
    getChildIsOpenDialog(val) {
      // 清除form表单中的数据
      this.form ={}
      // 进行弹出框的操作
      this.isOpenDialog = val.isOpenDialog,
      this.dialogTitle = val.title
    },
    // 接收父组件传来的数据 --- form
    getChildrenForm(val) {
      this.form.imgId = val.imgId
      this.form.bucketName = val.bucketName
      this.form.fileName = val.fileName
    },
    // 分页重新获取数据
    getList() {
      this.getAllExamInfo()
    },
    // 表格右侧操作栏 -- 修改
    handleUpdate(row) {
      this.form = {
        questionText: undefined,
        answer: undefined
      }
      this.isOpenDialog = true;
      this.form = row;
      this.title = "修改试题信息";
    },
    // 表格右侧操作栏 -- 删除
    handleDelete(row) {
      this.$modal
      .confirm('是否确认删除试题信息吗？')
      .then(function () {
        let tmpArr = []
        tmpArr.push(row.id)
        return delExamJudge(tmpArr);
      })
      .then(() => {
        this.getAllExamInfo();
      });
    },
    // 左侧勾选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // 给父组件传值
      this.$emit('judgeSelection', val)
    },
    // 弹出框逻辑操作
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.getAllExamInfo();
          done();
        })
        .catch((_) => {});
    },
    // 弹出框关闭
    dialogCancel() {
      this.isOpenDialog = false;
      this.getAllExamInfo();
    },
    // 弹出框提交表单信息
    dialogSubmitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateExamJudge(this.form).then((response) => {
              this.$modal.msgSuccess("修改试题成功");
              this.isOpenDialog = false;
            });
          } else {
            addExamJudge(this.form).then((res) => {
              this.$modal.msgSuccess("新增试题成功");
              this.getAllExamInfo();
              this.isOpenDialog = false;
            });
          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
